<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>短信发送</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="css/doubleDate.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="css/pagination.css">
    <link rel="stylesheet" href="css/sms.css">
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container-fluid sms">
        <div class="container-fluid">
            <p>短信发送详情</p>
            <div class="container-fluid">
                <div class="row details_box">
                    <ul class="details">
                        <li>发送状态：</li>
                        <li class="dropdown"><input type="text" value="" class="input-group ipticon" placeholder="全部">
                            <ul class="dropdown_ul">
                                <li>全部</li>
                                <li>发送成功</li>
                                <li>发送失败</li>
                            </ul>
                        </li>
                        <li class="sms_query"><input type="button" value="查询" class="btn btn-info"></li>
                        <li class="sms_query"><input type="button" value="批量重发" class="btn btn-info batch_agian"></li>
                    </ul>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered tab_details">
                        <thead>
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>序号</th>
                                <th>短信流水号</th>
                                <th>发送时间</th>
                                <th>电话号码</th>
                                <th>短信类型</th>
                                <th>是否成功</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>1</td>
                            <td>20160418011</td>
                            <td>2016/04/18:09:00</td>
                            <td>13687312669</td>
                            <td>优惠购车</td>
                            <td>发送成功</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>2</td>
                            <td>20160418006</td>
                            <td>2016/04/18:09:00</td>
                            <td>13687312669</td>
                            <td>活动推送</td>
                            <td>发送失败</td>
                            <td><a href="javascript:;">重发</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>3</td>
                            <td>20160418004</td>
                            <td>2016/04/18:09:00</td>
                            <td>13687312669</td>
                            <td>保险优惠</td>
                            <td>发送成功</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>4</td>
                            <td>20160418001</td>
                            <td>2016/04/18:09:00</td>
                            <td>13687312669</td>
                            <td>保险到期提醒</td>
                            <td>发送失败</td>
                            <td><a href="javascript:;">重发</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>5</td>
                            <td>20160418001</td>
                            <td>2016/04/18:09:00</td>
                            <td>13687312669</td>
                            <td>保险到期提醒</td>
                            <td>发送成功</td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div>
                <div class="pages">
                    <div id="Pagination"></div>
                </div>
            </div>
            <div class="textarea_box">
                <ul>
                    <li>
                        <span>短信内容：</span>
                    <textarea name="" cols="80" rows="5">短信模板标题短信模板标题短信模板标题短信模板标题短信模板标题短信模板标题
                    </textarea>
                    </li>
                    <li>
                        <span>备注内容：</span>
                    <textarea name="" cols="80" rows="5">短信模板标题短信模板标题短信模板标题短信模板标题短信模板标题短信模板标题
                    </textarea>
                    </li>
                </ul>
                <div>
                    <input type="button" value="关闭" class="btn">
                </div>
            </div>
        </div>
        <div class="mask" style="display: none">
            <div>
                 <p>共计50条短信发送完成！</p>
                 <p>其中40条<span>发送成功</span>，10条<span>发送失败</span>,</p>
                 <p>请点击重发完成发送。谢谢！</p>
                 <div><input type="button" value="关闭" class="btn btn_close"></div>
            </div>
        </div>
    </div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/doubleDate2.0.js"></script>
<script src="js/jquery.pagination.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    (function(){//下拉菜单
        var down =  $(".dropdown");
        for(var i=0;i<down.length;i++){
            $(down[i]).click(function(){
                $(this).find(".dropdown_ul").toggle();
            })
            var down_li = $(down[i]).find(".dropdown_ul").children("li");
            for(var c=0;c<down_li.length;c++){
                $(down_li[c]).click(function(){
                    $(this).parent().parent().children("input").val(this.innerText);
                })
            }
        }
    })();
    $(document).ready(function(){
        $(".message_query table tbody tr td:nth-child(7):contains('发送成功')").css("color","#5ce61f");
        $(".message_query table tbody tr td:nth-child(7):contains('发送失败')").css("color","#df3d3e");
        $(".message_query table tbody tr td:nth-child(7):contains('部分成功')").css("color","#3588e3");
        $(".tab_details  tbody tr td:nth-child(7):contains('发送成功')").css("color","#5ce61f");
        $(".tab_details  tbody tr td:nth-child(7):contains('发送失败')").css("color","#df3d3e");
    })
    ///////////////设置分页数////////////////////////
    $("#Pagination").pagination("4");//设置分页的页数
    <!--点击批量重发-->
    $(".batch_agian").click(function(){
        $(".mask").css("display","block");
    })
    $(".btn_close").click(function(){
        $(".mask").css("display","none");
    })

</script>
</body>
</html>